<template>
  <div>
    <view
      style="
        position: fixed;
        top: 0px;
        background-color: #fff;
        width: 100%;
        z-index: 999;
      "
    >
      <view :style="{ height: statusBarHeight + 'px' }" />
      <view class="nav-main" :style="{ height: navbarHeight + 'px' }">
        <!-- 左侧插槽，默认展示按钮组 -->
        <slot name="left">
          <view class="left" :style="{ 'margin-top': navbarHeight / 2 + 'px' }">
            <image
              class="btn-icon"
              :src="require('@/static/project/back.png')"
              mode="scaleToFill"
              @click="back"
            />
            <view class="line" />

            <image
              class="btn-icon"
              :src="require('@/static/project/home.png')"
              mode="scaleToFill"
              @click="backHome"
            />
          </view>
        </slot>
        <!-- <text class="title">
          {{ title }}
        </text> -->
      </view>
      <view
        :style="{
          position: fixed,
          top: 0 + 'px',
          'z-index': 999,
          padding: '0px 16px',
        }"
      >
        <van-search
          v-model="searchValue"
          shape="round"
          placeholder="请输入关键字"
          @search="onSearch"
          @cancel="onCancel"
          @clear="onClear"
          @blur="onBlur"
        />
      </view>
      <view>
        <van-divider />
      </view>
    </view>

    <view
      :style="{
        'margin-top': statusBarHeight + navbarHeight + 58 + 'px',
        'padding-bottom': 4 + 'px',
      }"
    >
      <view v-for="item in list" :key="item.id" class="content">
        <view class="list">
          <view class="title">
            <view class="wenzi">
              {{ item.name }}
            </view>
            <span class="top-btn">
              <span class="in-progress">进行中</span>
            </span>
          </view>
          <view class="class-btn">
            <image
              src="@/static/project/search.png"
              style="width: 16px; height: 16px; margin-right: 2px"
            />
            <van-icon name="edit" style="margin-right: 3px" />
            <van-icon name="delete-o" color="red" />
          </view>
        </view>
        <view class="list">
          <view>商务负责人</view>
          <view>{{ item.bmUser.username }}</view>
        </view>
        <view class="list">
          <view>技术负责人</view>
          <view>{{ item.technical_director }}</view>
        </view>
        <view class="list">
          <view>计划开始</view>
          <view>{{ item.begin | timeFormat }}</view>
        </view>
        <view class="list">
          <view>计划完成</view>
          <view>{{ item.end | timeFormat }}</view>
        </view>
        <view class="list">
          <view>里程名称</view>
          <view class="lcname-class">
            {{ item.lcname }}
          </view>
        </view>
        <view class="list-status">
          <view>里程状态</view>
          <view
            v-if="item.milestoneRespVO[0].project_status == '0'"
            class="status"
          >
            <view class="status-color" />
            <view class="font-color">
              未开始
            </view>
          </view>
          <view
            v-else-if="item.milestoneRespVO[0].project_status == '1'"
            class="status"
          >
            <view class="status-colorTwo" />
            <view class="font-colorTwo">
              进行中
            </view>
          </view>
          <view
            v-else-if="item.milestoneRespVO[0].project_status == '2'"
            class="status"
          >
            <view class="status-colorThree" />
            <view class="font-colorThree">
              已挂起
            </view>
          </view>
          <view v-else class="status">
            <view class="status-colorFourth" />
            <view class="font-colorFourth">
              已关闭
            </view>
          </view>
        </view>
      </view>
    </view>
  </div>
</template>

<script>
import { getDeviceInfo } from '@/utils/storage'
import { getApprovalList } from '@/apis/project'
import { formatTimestamp } from '@/utils/format'
export default {
  filters: {
    timeFormat(value) {
      return formatTimestamp(value)
    },
  },
  data() {
    return {
      statusBarHeight: '0',
      navbarHeight: '0',
      searchValue: '',
      list: [],
    }
  },
  onLoad() {},
  mounted() {
    // uni.setNavigationBarTitle({
    // 	title: '搜索'
    // })
    this.setHeight()
    this.onSearch({ detail: '' })
    // wx.setNavigationBarTitle({
    // 	title: '搜索'
    // })
  },
  methods: {
    // 设置高度
    setHeight() {
      const { statusBarHeight, navbarHeight } = getDeviceInfo()
      this.statusBarHeight = statusBarHeight
      this.navbarHeight = navbarHeight
      //   console.log(this.statusBarHeight, 'statusBarHeight')
      //   console.log(this.navbarHeight, 'navbarHeight')
    },
    // 返回上一级
    back() {
      uni.navigateBack({
        delta: 1,
      })
    },
    // 返回主页
    backHome() {
      uni.switchTab({
        url: '/pages/office/index/index',
      })
    },
    // 点击搜索
    async onSearch(val) {
      this.list = []
      const params = {
        name: val.detail,
      }
      //   console.log(val.detail, 'val')
      const res = await getApprovalList(params)
      console.log(res, '项目列表')
      console.log(res.data.list)
      this.list = res.data.list
      //   console.log(this.searchValue, '点击搜索')
    },
    // 点击清除
    onClear() {
      this.onSearch({ detail: '' })
    },
    // 失去焦点
    onBlur(e) {
      console.log(e, '失焦')
      this.onSearch({ detail: e.detail.value })
    },
  },
}
</script>

<style lang="scss" scoped>
.nav-main {
  // position: relative;
  // position: fixed;
  // display: flex;
  // align-items: center;
  .left {
    height: 32px;
    padding: 0 26rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 24rpx;
    // top: 50%;
    transform: translateY(-50%);
    border-radius: 32rpx;
    // border: 1px solid #e7ebee;

    .btn-icon {
      width: 48rpx;
      height: 48rpx;
    }

    .line {
      width: 2rpx;
      height: 18px;
      margin: 0 14rpx;
      background: #e7ebee;
    }
  }

  .title {
    font-size: 32rpx;
    font-weight: 500;
    color: #000000;
  }
}
.content {
  margin: 8px 16px;
  padding: 4px 8px;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
  .list {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    line-height: 30px;
    .lcname-class {
      background-color: #f1f5f9;
      color: #739eca;
      margin-top: 6px;
      height: 20px;
      padding: 0px 8px;
      line-height: 20px;
    }
    .class-btn {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .title {
      display: flex;
      flex-direction: row;
      .wenzi {
        font-size: 16px;
        font-weight: 600;
      }
      .top-btn {
        span {
          border-radius: 3px;
          padding: 0px 5px;
          margin-left: 10px;
          color: #739eca;
          border: 1px solid #739eca;
          background: #f1f5f9;
        }
      }
    }
  }
  .list-status {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    line-height: 30px;
    .status {
      display: flex;
      flex-direction: row;
      align-items: center;
      .status-color {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #cccccc;
        }
        .font-color {
          margin-left: 6px;
          color: #cccccc;
          font-weight: 550;
        }
        .status-colorTwo {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #739eca;
        }
        .font-colorTwo {
          margin-left: 6px;
          color: #739eca;
          font-weight: 550;
        }
        .status-colorThree {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #04cb64;
        }
        .font-colorThree {
          margin-left: 6px;
          color: #04cb64;
          font-weight: 550;
        }
        .status-colorFourth {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #999;
        }
        .font-colorFourth {
          margin-left: 6px;
          color: #999;
          font-weight: 550;
        }
    }
  }
}
::v-deep .van-divider {
  margin: 0px;
}
</style>
